﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="NewRecipe.aspx.cs" Inherits="NewRecipe" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    <link href="js/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.validationEngine.js" type="text/javascript"></script>
    <script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
    <link rel="stylesheet" href="jquery/jRating.jquery.css" type="text/css" />
    <script type="text/javascript" src="jquery/jRating.jquery.js"></script>
<script>

    $(document).ready(function () {
        jQuery(".form").validationEngine({ scroll: false, focusFirstField: false });
    });
    function getFile() {
        document.getElementById("<%=fImageUpload.ClientID%>").click();
        return false;
    }
    function readURL(input) {
        //alert(input);
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById("<%=Image2.ClientID%>").src = e.target.result;
                var object = e.target.result;
                object = object.replace('data:image/png;base64,', '');
                object = object.replace('data:image/png;base64,', '');
                object = object.replace('data:image/jpg;base64,', '');
                object = object.replace('data:image/gif;base64,', '');
                object = object.replace('data:image/jpeg;base64,', '');
                object = object.replace('data:image/bmp;base64,', '');
                object = object.replace('data:image/Icon;base64,', '');
                document.getElementById("<%=hdImage.ClientID%>").value = object;
                //alert(object);
            };
            reader.readAsDataURL(input.files[0]);
            return false;
        }
    }
    function confirmSearch() {
        if (confirm("Are you sure you want to search!"))
            return true;
        return false;
    }
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<nav id="mainnavi" >
  <ul id="ulHead" style="display:none"  runat="server">
   	  <li><img src="images/menu_05.png" alt="New recipe" width="95" height="15"></li>
  </ul>
</nav>

<section id="bg_content">
    <div class="clearfix clear">
    	<ul class="ul04">
          <li>
            <asp:ImageButton ID="btnEdit" ImageUrl="images/btn_edit.jpg" runat="server" CssClass="save_button" Visible="false"
            OnClick="btn_Click"/>
          </li>
          <li>
            <asp:ImageButton src="images/btn_save.jpg" ID="btnSave"  runat="server" Visible="false" width="68" height="27"
            OnClick="btnInsertRecipe_Click"  OnClientClick="return jQuery('.form').validationEngine('validate')"
            CausesValidation="false"
           /></li>
          <li class="li01">
           <asp:ImageButton ID="btnDelete" src="images/btn_del.jpg"  Visible="false" runat="server" OnClientClick="if (!confirm('Are you sure you want delete?')) return false;"
            OnClick="btnDelete_Click"></asp:ImageButton>
          
          </li>
        </ul>
    </div>
    <asp:Panel ID="panel3" Visible="true" runat="server">
	    <%--<h2>Ca Nuong Mo Hanh<br>Roasted Catfish with Scallion Oil</h2>--%>
        <h2>
            <asp:Label runat="server" ID="lblRecipeName"></asp:Label>
        </h2>
    </asp:Panel>
    <asp:Panel ID="panel4" Visible="false" runat="server">
        <p class="ip-text">
         <asp:TextBox runat="server" ID="txtRecipeName" CssClass="validate[required] input-trpr" MaxLength="100" placeholder="Recipe Name"
                                ></asp:TextBox>
        </p>
    </asp:Panel>
    <section id="mainphoto" >
  		<figure><img src="images/noImage.jpg" class="imgRecipe"  style="margin-top:5px;" id="Image2" runat="server" />
       <%-- <a id="lnkFacebook" runat="server" target="_blank" class="icon-fb" >
            <img ID="imgFB"  width="30" height="30" 
        src="images/icon-fb.png" 
              />
        </a>--%>
        </figure>
        
	</section>

    <div class="basic" style="margin: 0 auto;" data-average="0" data-id="1"></div>

    <ul style="float:left; width:100%">
        <li style="float:left; margin-right:5px ">
         <a id="lnkFacebook" runat="server" target="_blank" >
            <img ID="img1"  width="30" height="30" 
        src="images/icon-fb.png" 
              />
        </a>
        </li>
        <li style="float:left; margin-right:5px ">
            <a id="lnkGoogle" runat="server" target="_blank" ><img
          src="https://www.gstatic.com/images/icons/gplus-32.png" width="30" height="30"  alt="Share on Google+"/></a>
        </li>
        <li style="float:left;margin-right:5px ">
            <a id="lnkTwitter" runat="server"  target="_blank"><img src="images/twitter.png" width="30" height="30" /></a>
        </li>
        <li >
            <a id="lnkEmail" runat="server"  target="_blank"><img src="images/mail.png" width="30" height="30" /></a>
        </li>
    </ul>
    <section id="btn">
  		<figure>
            <asp:ImageButton ID="btnUpload" runat="server" ImageUrl="images/btn_add.jpg"
                            Visible="false" OnClientClick="return getFile()" />
        </figure>
	</section>

    
    <asp:Panel ID="panel1" Visible="false" runat="server">
    <div class="clearfix clear mar_b10">
    	    <div class="bg01">
        	    <div class="bg02">
            	    <div class="bg03 clearfix">
                	    <div class="w50pc">
                            <div class="txt01">
                                <p>Serving Size:</p>
                            </div>
                            <div class="txt_bg">
                               <asp:TextBox runat="server" ID="txtServing" CssClass="validate[custom[onlyNumber]]"
                                                Width="50" MaxLength="5"></asp:TextBox>
                            </div>
                        </div>
                        <div class="w50pc">
                            <div class="txt01">
                                <p>Total Time (min):</p>
                            </div>
                            <div class="txt_bg">
                                <asp:TextBox runat="server" ID="txtCook" CssClass="validate[custom[onlyNumber]]"
                                                Width="50" MaxLength="5"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p class="title01">Description</p>
        <div class="ip-textarea">
            <asp:TextBox runat="server" ID="txtDescription" CssClass="input-trpr" TextMode="MultiLine" 
                    ></asp:TextBox>
        </div>
        <p class="title01">Ingredients</p>
        <div class="ip-textarea" >
            <asp:TextBox ID="txtIngredient" runat="server" CssClass="field-areatbox" TextMode="MultiLine" ></asp:TextBox>
        </div>

        <p class="title01">Directions</p>
        <div class="ip-textarea">
            <asp:TextBox ID="txtRecDirection" runat="server" CssClass="field-areatbox"  TextMode="MultiLine" ></asp:TextBox>
        </div>

        <div style="padding: 5px; ">
                            <input type="checkbox" id="Checkbox1" checked="true" runat="server" name="vehicle"
                                value="1" />Share with others
                        </div>    
       
    </asp:Panel>

    <asp:Panel ID="panel2" Visible="true" runat="server">
        <div class="clearfix clear mar_b10">
    	    <div class="bg01">
        	    <div class="bg02">
            	    <div class="bg03 clearfix">
                	    <div class="w50pc">
                            <div class="txt01">
                                <p>Serving Size:</p>
                            </div>
                            <div class="txt01">
                                <asp:Label ID="lblServing" runat="server"> </asp:Label>
                               <%-- <input name="Serving size" type="text" size="5" />--%>
                            </div>
                        </div>
                        <div class="w50pc" style="margin-left:40px;">
                            <div class="txt01">
                                <p>Total Time (min):</p>
                            </div>
                            <div class="txt01">
                                <%--<input name="Serving size" type="text" size="5" />--%>
                                <asp:Label ID="lblTime" runat="server"> </asp:Label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix clear mar_b10">
            <p class="title01">Description</p>
    	    <div class="bg01">
        	    <div class="bg04">
            	    <div class="bg05 clearfix">
                	    <asp:Label ID="lblDescription" runat="server"></asp:Label>
                        <%--<p>Ca nuong da don with hanh mo (scallion oil) was a grand surprise for our guests at our <span class="txt_blue">Foodbuzz 24 x 24 Spring Roll Party</span>.</p>--%>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix clear mar_b10">
    	    <p class="title01">Ingredients</p>
            <div class="bg01">
        	    <div class="bg06">
            	    <div class="bg07 clearfix">
                	    <asp:Label ID="lblIngredient"  Width="100%" runat="server"></asp:Label>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix clear mar_b20">
    	    <p class="title01">Directions</p>
            <div class="bg01">
        	    <div class="bg06">
            	    <div class="bg07 clearfix">
                	    <asp:Label ID="lblRecDirection" Width="100%" runat="server" CssClass="mar_b12 label-over"></asp:Label>
                    </div>
                </div>
            </div>
        </div>
         <div style="padding: 5px;">
                            <input type="checkbox" id="chIsPublish" disabled="true" checked="true" runat="server"
                                name="vehicle" value="1" />Share with others
                        </div>
    </asp:Panel>
    <div id="fb-root"></div>
<script>    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=208238106017076";
        fjs.parentNode.insertBefore(js, fjs);
    } (document, 'script', 'facebook-jssdk'));
    function getUrlVars() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }
    </script>
    <div id="mycomment" style="width:100%">
        <%--<div class="fb-comments" data-href="" data-width="400" data-numposts="10" data-colorscheme="light"></div>--%>
    </div>
    <script>
        //alert(getUrlVars()["RecipeId"]);
        if (getUrlVars()["RecipeId"] != null) {
            var elemDiv = document.getElementById("mycomment");
            var markup = '';
            var widthWin = $(window).width() - 10;
            markup += '<div class="fb-comments" data-href="' + location.href.replace("/mobile") + '" data-num-posts="10" data-width="' + widthWin + '" style="margin-top:2em;"></div>';
            elemDiv.innerHTML = markup;
            FB.XFBML.parse(elemDiv);
        }
</script>
<%--<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>--%>
</section>
<div style="overflow: hidden; height: 0px; width: 0px;">
         <asp:FileUpload type="file" id="fImageUpload" runat="server" onchange="readURL(this);" />
    </div>
    <asp:HiddenField ID="hdImage" runat="server" />
    <asp:HiddenField ID="ratingStar" runat="server" />
   <script type="text/javascript">
       function Rating() {
           var userid = '<%=Session["Userid"]%>';
           //userid = "1";
           if (document.getElementById("<%=ratingStar.ClientID%>").value != "") {
               //alert(userid);
               $(".basic").attr('data-average', document.getElementById("<%=ratingStar.ClientID%>").value);
           } else {
               $(".basic").attr('data-average', '0');
           }
           if (userid != "") {
               var recipeID = getUrlVars()["RecipeId"];
               //alert(recipeID);
               $(".basic").jRating({
                   step: true,
                   length: 5,
                   decimalLength: 1,
                   onSuccess: function (element, rate) {
                       document.getElementById("<%=ratingStar.ClientID%>").value = rate;
                       if (recipeID != null)
                           submitRating(rate);
                   },
                   onError: function () {
                       alert('Error : please retry');
                   }
               });

           } else {
               $(".basic").jRating({
                   isDisabled: true
               });
           }
           //return false;
       }
       function submitRating(rate) {
           var recipeID = getUrlVars()["RecipeId"];
           $.ajax({
               type: "POST",
               url: "PIMService.asmx/Rating",
               data: "{'objectTypeID':'1','objectID':'" + parseInt(recipeID, 10) + "','rating':'" + parseInt(rate, 10) + "'}",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function (response) {
               },
               error: function (msg) { alert(msg.d); }
           });
       }

       


    </script>
    <asp:HiddenField ID="checkUser" runat="server" />
    <asp:HiddenField ID="hdLinkImage" runat="server" />
</asp:Content>

